<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{% endblock %} - 欢迎使用平台</title>
    
    <!-- CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/dataTables.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/custom.css') }}">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    
    <!-- JavaScript -->
    <script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/chart.min.js') }}"></script>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom shadow-sm">
        <div class="container">
            <a class="navbar-brand" href="{{ url_for('main.index') }}">
                <span class="text-primary">欢迎使用平台</span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('data.index') }}">数据采集</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('analysis.index') }}">分子标记分析</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('reports.index') }}">报告生成</a>
                    </li>
                </ul>
                <div class="d-flex align-items-center">
                    {% if current_user.is_authenticated %}
                    <div class="dropdown">
                        <button class="btn btn-outline-primary dropdown-toggle" type="button" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                            {{ current_user.username }}
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
                            <li><a class="dropdown-item" href="#">个人信息</a></li>
                            {% if current_user.role == 'admin' %}
                            <li><a class="dropdown-item" href="{{ url_for('auth.users') }}">用户管理</a></li>
                            {% endif %}
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{{ url_for('auth.logout') }}">退出登录</a></li>
                        </ul>
                    </div>
                    {% else %}
                    <a href="{{ url_for('auth.login') }}" class="btn btn-outline-primary me-2">登录</a>
                    {% endif %}
                    <div class="dropdown">
                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="themeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fas fa-moon"></i>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
                            <li><a class="dropdown-item" href="#" id="lightMode">浅色模式</a></li>
                            <li><a class="dropdown-item" href="#" id="darkMode">深色模式</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    {% block content %}{% endblock %}

    {% block scripts %}{% endblock %}

    <!-- 初始化脚本 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化所有下拉菜单
            const dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'));
            const dropdownList = dropdownElementList.map(function(dropdownToggleEl) {
                return new bootstrap.Dropdown(dropdownToggleEl);
            });

            // 点击页面空白处关闭下拉菜单
            document.addEventListener('click', function(event) {
                // 如果点击的不是下拉菜单内的元素
                if (!event.target.closest('.dropdown')) {
                    dropdownList.forEach(function(dropdown) {
                        dropdown.hide();
                    });
                }
            });

            // 点击下拉菜单项时关闭菜单
            document.querySelectorAll('.dropdown-item').forEach(function(item) {
                item.addEventListener('click', function(event) {
                    const dropdownEl = event.target.closest('.dropdown');
                    const dropdown = bootstrap.Dropdown.getInstance(dropdownEl.querySelector('.dropdown-toggle'));
                    if (dropdown) {
                        dropdown.hide();
                    }
                });
            });

            // 主题切换功能
            const lightModeBtn = document.getElementById('lightMode');
            const darkModeBtn = document.getElementById('darkMode');

            if (lightModeBtn) {
                lightModeBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    document.body.classList.remove('dark-mode');
                    localStorage.setItem('darkMode', 'false');
                });
            }

            if (darkModeBtn) {
                darkModeBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    document.body.classList.add('dark-mode');
                    localStorage.setItem('darkMode', 'true');
                });
            }

            // 应用保存的主题设置
            if (localStorage.getItem('darkMode') === 'true') {
                document.body.classList.add('dark-mode');
            }
        });
    </script>
</body>
</html>